<template>
  <div class="container">
      <div style="padding-top:10px;">
        <ul>
           <li>
               <courseList :kcList="item"  v-for="(item,idx) in courseList" :key="idx" :type="1" v-if="item.article_type==5"></courseList>
               <courseList :kcList="item"  v-for="(item,idx) in courseList" :key="idx" :type="2" v-if="item.article_type==6"></courseList>
               <starList :starList="item"  v-for="(item,idx) in starList" :key="idx" v-if="type==4"></starList>
           </li>
        </ul>
         
      </div>
      <img src="/static/images/que/no_conten@2x.png" class="queS" v-if="queS"/>
  </div>
</template>

<script>
import courseList from "@/components/list";
import starList from "@/components/starList";
import {courseSpike} from "@/api/index";
import {coursePing} from "@/api/index";
import {startList} from "@/api/star"
export default {
  components: {
      starList,
      courseList
  },

  data () {
    return {
      num:4,
      sign_today:0,
      banner: [],
      address:"太原",
      indexNav: [],
      starlNav:[
        {name:"推荐",id:"1",top:0,jiang:0,sheng:0},
        {name:"价格",id:"2",top:0,jiang:5,sheng:6},
        {name:"粉丝",id:"3",top:0,jiang:3,sheng:4},
        {name:"距离",id:"4",top:0,jiang:2,sheng:2},
     ],
      courseList:[],
      currentStar:"0",
      starstatus:0,
      load:false,
      page:1,
      zip:"",
      lng:0,
      lat:0,
      user_id:0,
      img: this.$URL.imgurl,
      queS:false,
      type:"",
      cateId:"",
      starList:[],
      coordinate:{
        longitude:0,
        latitude:0
      },
    }
  },
  methods:{
    getList(){
      this.queS=false
      let data={};
      data.page=this.page;
      data.cate_id=this.cateId;
      if(this.type==2){
        
         coursePing(data).then(res=>{
          console.log(res)
          if(res.code==200){
            let last_page=res.data.last_page;
            if(this.page==1){
                this.courseList=res.data.data
            }else{
                this.courseList=this.courseList.concat(res.data.data)
            }
            if(last_page>this.page){
              this.load=true
            }else{
              this.load=false
            }
          }else if(res.code==201){
            this.queS=true
          }
        }).catch(res=>{
           this.queS=true
        })
      }else if(this.type==3){
         courseSpike(data).then(res=>{
          console.log(res)
          if(res.code==200){
            let last_page=res.data.last_page;
            if(this.page==1){
                this.courseList=res.data.data
            }else{
                this.courseList=this.courseList.concat(res.data.data)
            }
            if(last_page>this.page){
              this.load=true
            }else{
              this.load=false
            }
          }else if(res.code==201){
            this.queS=true
          }
        }).catch(res=>{
           this.queS=true
        })
      }else if(this.type==4){
        data.status=this.starstatus
        data.lng=this.coordinate.longitude;
        data.lat=this.coordinate.latitude;
        data.user_id=this.user_id;
        startList(data).then(res=>{
          if(res.code==200){
              console.log(res)
                let last_page=res.data.last_page;
                var list=res.data.data
                for(var i=0;i<list.length;i++){
                  list[i].dis=list[i].dis.toFixed(2)
                }
                this.page==1?this.starList=list:this.starList=this.concat(list) ;
                last_page>this.page?this.load=true:this.load=false
          }else if(res.code==201){
              this.queS=true;
          }
        }).catch(res=>{
           this.queS=true
        })
      }
      
    },
  },
  created () {
    
  },
  onReachBottom(){
    if(this.load){
       this.page++
       this.getList()
    }
  },
  onLoad(options){
    Object.assign(this.$data, this.$options.data())
    this.lng=wx.getStorageSync("coordinate").longitude;
    this.lat=wx.getStorageSync("coordinate").latitude;
    this.zip=wx.getStorageSync("qcode");
    this.user_id=wx.getStorageSync("user_info").id;
    wx.getStorageSync("coordinate")?this.coordinate=wx.getStorageSync("coordinate"):'';
    // this.address=wx.getStorageSync("address");
       console.log(options)
       this.cateId=options.cateId;
       this.type=options.type;
       this.getList()
       wx.setNavigationBarTitle({
         title: '课程列表',
         success: (result) => {
           
         },
         fail: () => {},
         complete: () => {}
       });
         
  },
  onUnload(){
     
  },
}
</script>
<style>
.classify .nav .nav-item {
  width: 25%;
}
</style>
<style lang="scss">
.queS{
  width:417rpx;
  height:324rpx;
  display:block;
  margin:50px auto;
}
    .banner swiper{
      height:135px;
      img{
        height:135px;
      }
    } 
    .specialNav{
      font-size:14px;
      font-weight:500;
      color:rgba(51,51,51,1);
      text-align:center;
      height:40px;
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 4px 1px rgba(0, 0, 0, 0.07);
      line-height:40px;
      .icon{
        width:4px;
        height:9px;
        margin-left:1px;
      }
      .icon1{
        width:9rpx;
        height:7rpx;
        margin-left:1px;
        vertical-align: middle;
      }
      .top-bar-active{
        color:#1A84FB;
      }
    }
</style>
